@charset 'UTF-8';
@import '../../config/scss/function.scss', '../../config/scss/config.scss';

.header {
    .right-menu-side {
      z-index: 1040;
      background-color: none;
      width: 40%;
      position: fixed;
      left: -60%;
      margin-top: -70px;
      overflow-y: scroll;
      height: 100%;

      -webkit-transition: all .25s ease-out;
      -o-transition: all .25s ease-out;
      transition: all .25s ease-out;

      &.active{
        left: 60%;
      }
    }
    .left-menu-side {
      float: left;
        z-index: 1040;
        background-color: $c14;
        width: 60%;

        position: fixed;
        left: -60%;
        margin-top: -70px;
        overflow-y: scroll;
        height: 100%;

        -webkit-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;

        &.active{
          left: 0;
        }


        .nologin-menu {
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;

                li {
                    padding: 10px 20px;

                    &:first-child {
                        padding-top: 20px;
                    }

                    .green-text {
                        color: $c1;
                    }

                    a {
                        color: $c3;
                        .line {
                            height: 3px;
                            width: 0;
                            align-self: flex-start;
                            background-color: $c1;
                            transition: width 0.4s;
                        }
                    }

                    &.active{
                      a{
                        &.two-size > .line{
                          width: 30px;
                        }
                        &.four-size > .line{
                          width: 55px;
                        }
                        &.five-size > .line{
                          width: 70px;
                        }
                      }
                    }
                }
            }
        }

        .login-menu {
          padding-bottom: 100px;

          .user-img{
            margin-top: 20px;
            img{
              width: 50px;
              height: 50px;
            }
          }

          .user-info{
            .star{
              star{
                color: $c1;
              }
            }
            .icon-renzheng{
              color: red;
            }
          }

          .list-group{
            margin-bottom: 0;
          }

          .list-group-item {
              border: 0px;
              background-color: $c14;
              padding: 5px 15px;
              margin-left: 5px;
              margin-right: 10px;
              margin-bottom: 10px;
              text-align: center;
              &.disabled {
                  text-align: left;
                  cursor: default !important;
              }
              &.active {
                  background-color: $c1;
                  border-radius: 15px;
                  i[class^="icon-"] {
                      color: #fff;
                  }
              }
              i[class^="icon-"] {
                  color: $c2;
              }
          }
        }
    }

    > .navbar-default {
        background-color: $c6;

        .links {
            li {
                cursor: pointer;
                margin-top: $header-margin-top1;
                margin-left: $header-li-margin-left;
            }
        }

        .btns {
            li {
                margin-top: $header-margin-top2;
                margin-left: $header-li-margin-left;
            }
        }

        .users {
            li {
                margin-top: $header-margin-top2;
                margin-left: 0;

                &:last-child {
                    margin-top: 0;
                    margin-left: 0;
                }

                &.headerpserson {
                    min-width: 40px;
                    min-height: 40px;
                    cursor: pointer;
                }
            }
        }

        .navbar-nav {
            .active {
                a {
                    background-color: inherit;

                    .line {
                        width: 100%;
                    }
                }
            }

            a:hover {
                .line {
                    width: 100%;
                }
            }
        }
    }

    > .navbar {
        min-height: $header-height;
        margin: 0;
        border: 0;

        .navbar-brand {
            img {
                width: $header-navbar-brand-width;
            }
        }

        .navbar-brand {
            line-height: $header-line-height !important;
        }

        .navbar-toggle {
            margin-top: $header-navbar-toggle !important;
        }

        a,
        a:hover {
            color: $c3 !important;
            background-color: inherit;
            font-weight: bold;
        }

        .line {
            height: 3px;
            width: 0;
            align-self: flex-start;
            background-color: $c1;
            transition: width 0.4s;
        }

        .header-btn,
        .header-btn:hover {
            padding: 5px 20px;
            border-radius: 6px;
            font-weight: normal;
        }

        .header-sign-in,
        .header-sign-in:hover {
            color: $mt_c_main !important;
        }

        .header-sign-up,
        .header-sign-up:hover {
            color: $mt_c_default !important;
            background-color: $c1 !important;
        }

        .header-img {
          cursor: pointer;
            img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-top: 10px;
                cursor: pointer;
            }
            .real-name{
              float: right;
              margin-top: 20px;
              margin-left: 10px;
              color: #000;
              cursor: pointer;
            }
        }
    }

    .modalpersonal1 {
        display: block;
        left: -50%;
        min-width: 150px;
        max-width: 200px;
        // padding: 0 10px;
        border-radius: 5px !important;

        li {
            margin: 0 !important;
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 1px solid #eef0f1;

            // &:hover{
            //     color: #fff;
            //     background-color: $c1;
            //     font-weight: bolder;
            // }

            // &:not(:first-child):hover, &.active {
            //   color: #fff;
            //   background-color: $c1;
            //   font-weight: bolder;
            // }

            &:hover, &.active {
              color: #fff;
              background-color: $c1;
              font-weight: bolder;
            }

            // &.active{
            //     font-weight: bolder;
            // }

            // &:first-child {
            //     cursor: default;
            //     margin: auto -10px !important;
            //     // color: #fff;
            //     // background-color: $c1;
            //     padding: 10px 0 10px 30px;
            //     // text-align: center;
            //     border-top-right-radius: 5px;
            //     border-top-left-radius: 5px;
            // }

            &:last-child{
              border-bottom: 0;
            }
        }
    }

    .navbar-header {
        margin-bottom: 15px;
    }

    @media screen and (max-width: 768px) {
        > .navbar {
            .header-sign-in,
            .header-sign-in:hover,
            .header-sign-up,
            .header-sign-up:hover {
                background-color: inherit !important;
                color: $c1 !important;
                font-weight: bold;
            }

            .navbar-header {
                display: flex;
                justify-content: center;

                .navbar-toggle {
                    padding: 10px;
                    position: absolute;
                    left: 5px;
                }
            }

            .two-size {
                width: 60px;
            }

            .four-size {
                width: 90px;
            }

            .five-size {
                width: 100px;
            }
        }
    }
}
